<template>
	<view class="nav-box" :style="{'height':height+'px','background':bgColor}">
		<!-- 自定义导航栏 -->
		<view class="status_bar" :style="{'height':statusBarHeight+'px'}">
			<!-- uni-ui这里是状态栏 -->
		</view>
		<!-- 胶囊位置信息 -->
		<view class="nav-main  flex align-center justify-center" :style="{height: navBarHeight+'px'}">
			<view class="nav-main-back" @click="back" v-show="backIcon">

				<image src="../static/gongzuotai/back@2x.png" class="backImg" mode=""></image>

			</view>
			<text class="nav-main-title" :style="{'color':textColor}">{{title}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			bgColor: {
				type: String,
				default: "#00ff00"
			},
			backIcon: {
				type: Boolean,
				default: true
			},
			title: {
				type: String,
				default: "我的"
			},
			textColor:{
				type:String,
				default:"#000"
			}
		},
		data() {
			return {
				//总高度
				height: 0,
				//胶囊位置信息
				menuButtonRect: {},
				//状态栏的高度
				statusBarHeight: 0,
				//导航栏的高度
				navBarHeight: 0
			}
		},
		created() {
			// this.height = uni.getStorageSync('navBarHeight')
			this.getHeight();
		},
		methods: {
			//获取屏幕导航栏高度
			getHeight() {
				if (uni.canIUse('getMenuButtonBoundingClientRect')) {

					let sysInfo = uni.getSystemInfoSync(); //状态栏的高度
					this.statusBarHeight = sysInfo.statusBarHeight;
					// 胶囊位置信息
					let rect = uni.getMenuButtonBoundingClientRect();
					this.menuButtonRect = JSON.parse(JSON.stringify(rect));
					// 导航栏高度
					let navBarHeight = (rect.top - sysInfo.statusBarHeight) * 2 + rect.height;
					this.navBarHeight = navBarHeight;
					// 自定义导航栏的高度
					this.height = sysInfo.statusBarHeight + navBarHeight;
					console.log('微信版本过低1', this.height);
				} else {
					console.log('微信版本过低2');
					uni.showToast({
						title: '您的微信版本过低，界面可能会显示不正常',
						icon: 'none',
						duration: 4000
					});
				}
			},
			//返回
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.nav-box {
		display: flex;

		align-items: center;
		flex-direction: row;
		width: 7;
		// background: blue;
	}

	.backImg {
		height: 30rpx;
		width: 16rpx;
	
		// margin-left: 20rpx;
		// background-color: red;
		position: absolute;
	}

	.status_bar {
		// height: var(--status-bar-height);
		width: 100%;
		// background:#ff0;
	}

	.nav-main {
		// position: relative;
		display: flex;

		align-items: center;
		flex-direction: row;
		margin-top: 35rpx;

		// background:red;

	}

	.nav-main-back {
		position: absolute;
		left: 30rpx;
		
		width: 36rpx;
		height: 30rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		// background-color: gold;
	}

	.nav-main-title {
		// color: green;
		font-size: 36rpx;
		display: flex;
		font-weight: 600;


		display: flex;
		justify-content: center;
		align-items: center;
		width: 750rpx;
		
		// background-color: green;
	}
</style>